<template>
  <view class="hire_page">
    <view class="header">
     <view class="_w-max _top _left _z-index-2 _pos-fixed _top _left"  :style="{ 'background': 'transparent' }">
        <view :style="{ width: '100%', height: recHeight, 'background': 'transparent' }"></view>
        <view class="felx_c h_96 f_s_18"  :style="{ color: '#FFF', 'background': 'transparent'}"><image class="back-img" src="../static/back.png" mode="" @tap="goBack" />会员中心</view>
      </view>
      <view class="vip-card-wrapper">
        <view class="vip-card-box">
           <image src="../static/vip_center_img1.png" class="vip-bg-img" />
           <view class="vip-mark-box">
               <image src="../static/vip_center_img2.png" /> VIP1
           </view>
           <view class="vip-txt-box">
             <view class="txt1">成长值需达到<text>100</text></view>
             <view class="txt2">解锁「生日优惠」等5项权益</view>
           </view>
        </view>
      </view>
      <view class="vip-rights-list">
        <view class="vip-rights-item" v-for="(item, index) in rightsData" :key="index">
          <image :src="item.image" />
          <view class="title">{{item.title}}</view>
        </view>
      </view>
    </view>
    <view class="upgrade-box">
      <view class="upgrade-hd">
        <image src="../static/vip_center_upgrade.png" class="upgrade-title" />
        <view class="rule-box">
          <image src="../static/vip_center_tips.png" class="tips-img" /> 积分规则
        </view>
      </view>
       <view class="intro">还需消费100元即可升级6级会员，升级后可解锁权益：</view>
       <view class="upgrade-list-wrapper">
         <view class="upgrade-list">
            <view class="upgrade-item" v-for="(item, index) in upgradeData" :key="index">
               <image :src="item.image" class="upgrade-item-img" /> {{item.title}}
            </view>
         </view>
         <image src="../static/vip_center_upgrade2.png" class="upgrade-img" />
       </view>
        <view class="operate-btn" @tap="goUpgrade">去升级</view>
    </view>
  </view>
</template>
<script>
import { getAllCity } from '@/api/car.js'
import { getBalanceDetail, getUserInfo, vipUpgrade} from '@/api/user.js'

export default {
  data() {
    return {
      recHeight: 0,
      srollOpacity: 0,
      srollColor: 255,
      balanceDetailData: [],
      date: this.getDate({
        format: true
     }),
     userInfo: {},
     rightsData: [
       {
         title: '会员标示',
         image: '../static/vip_center_icon1.png'
       },
       {
         title: '极速升级',
         image: '../static/vip_center_icon2.png'
       },
       {
         title: '专属优惠',
         image: '../static/vip_center_icon3.png'
       },
       {
         title: '积分加成',
         image: '../static/vip_center_icon4.png'
       },
       {
         title: '消息通知',
         image: '../static/vip_center_icon5.png'
       },
       {
         title: '无忧还车',
         image: '../static/vip_center_icon6.png'
       },
       {
         title: '广告过滤',
         image: '../static/vip_center_icon7.png'
       },
       {
         title: '专属客服',
         image: '../static/vip_center_icon8.png'
       },
     ],
     upgradeData: [
       {
         title: '50元生日优惠',
         image: '../static/vip_center_updrade_icon1.png'
       },
       {
         title: '会员积分1：12',
         image: '../static/vip_center_updrade_icon2.png'
       },
       {
         title: '无忧虑还车+1',
         image: '../static/vip_center_updrade_icon3.png'
       }
     ]
    }
  },
  computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
  // onPageScroll(e) {
  //   this.srollColor = e.scrollTop < 100 ? 255 - Math.floor(e.scrollTop * 2.55) : 0;
  //   this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
  // },
  onShow() {
    // this.getUserInfo()
  },
  onLoad() {
    this.getPhoneInfo();
  },
  methods: {
    goUpgrade(){
      let that = this;
      vipUpgrade().then((res) => {
        console.log('res---:', res)
        if(res.status == 200){
          that.$util.Tips({
            title: '升级成功'
          }, {tab:1,url:'/pages/car_index/index'})
        }else{
          that.$util.Tips({
            title: '升级失败'
          })
        }
      }).catch((err)=>{
     		that.$util.Tips({
     		  title: '升级失败'
     		})
     	})
     },
    // 获取用户信息
    getUserInfo() {
    	getUserInfo().then((res)=>{
    		this.userInfo = res.data;
    	}).catch((err)=>{
    		uni.showToast({
    			title:'用户信息获取失败',
    			icon:'none'
    		})
    	})
    },
    handleRecharge(){
      uni.navigateTo({
        url: `/pages/users/balance/recharge`
      })
    },
    handleReturnDeposit(){
      uni.navigateTo({
        url: `/pages/users/return_deposit/index`
      })
    },
    bindDateChange: function(e) {
        this.date = e.detail.value
    },
    getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
          
        if (type === 'start') {
            year = year - 60;
        } else if (type === 'end') {
            year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}`;
    },
    handleIntegralDetail(){
      uni.navigateTo({
        url: `/pages/users/sign_in_integral/detail`
      })
    },
    goBack(){
      uni.navigateBack()
    },
    // 获取顶部高度信息
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
        }
      });
    },
    }
}
</script>
<style lang="scss" scoped>
  .sign-popup-box{
    position: relative;
    width: 566rpx;
    padding-bottom: 46rpx;
    background: linear-gradient( 136deg, #E5F2FE 0%, #FFFFFF 44%, #E6EFFE 100%);
    box-shadow: inset 0rpx 4rpx 10rpx 0rpx rgba(153,153,153,0.1);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #F7FAFC;
    text-align: center;
    .integral-img3{
      width: 175rpx;
      height: 178rpx;
      margin-top: -70rpx;
    }
    .integral-img4{
      width: 160rpx;
      height: 158rpx;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .title{
      font-size: 48rpx;
      color: #8C2508;
      font-weight: bold;
      margin-top: 0rpx;
      margin-bottom: 28rpx;
    }
    .desc{
      font-size: 26rpx;
      color: #8C2508;
    }
    .btn{
      margin: 60rpx auto 0;
      width: 342rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-weight: 600;
      font-size: 26rpx;
      color: #FFFFFF;
      background: linear-gradient( 270deg, #F94846 0%, #FFA952 100%);
      box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(244,53,49,0.25);
      border-radius: 74rpx 74rpx 74rpx 74rpx;
    }
  }
  .integral-close-img{
    display: block;
    width: 38rpx;
    height: 38rpx;
    margin: 28rpx auto 0;
  }
  .back-img{
    position: absolute;
    left: 10rpx;
    width: 48rpx;
    height: 48rpx;
  }
  .header{
    position: relative;
    padding: 0 26rpx;
    // height: 600rpx;
    position: relative;
    background: linear-gradient( 138deg, #3B4052 0%, #3B4052 46%, #3B4052 100%);
    .vip-card-wrapper{
       padding-top: 200rpx;
    }
    .vip-card-box{
      position: relative;
      width: 690rpx;
      height: 304rpx;
      padding: 40rpx 40rpx 30rpx 40rpx;
      box-sizing: border-box;
      background: linear-gradient( 142deg, #D5F0FF 0%, #97DBFF 100%);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      .vip-bg-img{
        width: 690rpx;
        height: 304rpx;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
      .vip-mark-box{
        position: absolute;
        z-index: 2;
        font-weight: 600;
        font-size: 48rpx;
        color: #1580ED;
        image{
          width: 48rpx;
          height: 48rpx;
          margin-right: 18rpx;
        }
      }
      .vip-txt-box{
        position: absolute;
        z-index: 2;
        bottom: 30rpx;
        .txt1{
          font-size: 24rpx;
          color: #004683;
          text{
            font-size: 40rpx;
          }
        }
        .txt2{
          margin-top: 32rpx;
          font-size: 24rpx;
          color: #004683;
        }
      }
    }
    .vip-rights-list{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 48rpx auto 0;
      padding-bottom: 70rpx;
      .vip-rights-item{
        width: 104rpx;
        margin-bottom: 48rpx;
        margin-right: 84rpx;
        &:nth-child(4n){
          margin-right: 0;
        }
        image{
          width: 88rpx;
          height: 88rpx;
        }
        .title{
          margin-top: 16rpx;
          font-size: 22rpx;
          color: #97999D;
        }
      }
    }
  }
  .upgrade-box{
     width: 750rpx;
     padding: 46rpx 30rpx 56rpx 30rpx;
     box-sizing: border-box;
     background: linear-gradient( 225deg, #F1DEBD 0%, #F2E0C1 100%);
     border-radius: 40rpx 40rpx 0rpx 0rpx;
     margin: -50rpx auto 0;
     z-index: 1;
     position: relative;
     .upgrade-hd{
       display: flex;
       align-items: center;
       justify-content: center;
     }
    .upgrade-title{
      width: 175rpx;
      height: 35rpx;
      margin: 0 auto;
    }
    .rule-box{
      font-size: 24rpx;
      color: #C78E49;
      display: flex;
      align-items: center;
      .tips-img{
        width: 32rpx;
        height: 32rpx;
        margin-right: 6rpx;
      }
    }
    .intro{
      margin: 20rpx auto 52rpx;
      font-size: 28rpx;
      color: #755121;
    }
    .upgrade-list-wrapper{
      position: relative;
      background: #FFF;
      border-radius: 20rpx;
      padding: 40rpx 20rpx 40rpx 20rpx;
      .upgrade-list{
        .upgrade-item{
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #9A5C1E;
          margin-bottom: 30rpx;
          &:last-child{
            margin-bottom: 0;
          }
          .upgrade-item-img{
            width: 48rpx;
            height: 48rpx;
            margin-right: 10rpx;
          }
        }
      }
      .upgrade-img{
        position: absolute;
        bottom: 10rpx;
        right: 10rpx;
        width: 266rpx;
        height: 194rpx;
      }
    } 
    .operate-btn{
       width: 690rpx;
       height: 110rpx;
       line-height: 110rpx;
       font-weight: bold;
       font-size: 32rpx;
       color: #96571A;
       text-align: center;
       background: linear-gradient( 90deg, #E5CC9D 0%, #DFB05F 100%);
       border-radius:  110rpx;
       margin: -40rpx auto 0;
       position: relative;
       z-index: 1;
     }
  }
  .integral-img1{
    position: absolute;
    top: 220rpx;
    right: 24rpx;
    width: 324rpx;
    height: 236rpx;
    z-index: 2;
  }

.h_96 { height: 96rpx; }
.c_fff { color: #FFFFFF; }
.f_s_18 { font-size: 36rpx; }

.felx_c {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hire_page {
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  background: #F2E0C0;
}

.container{
  width: 750rpx;
  padding: 0rpx 30rpx;
  box-sizing: border-box;
  position: relative;
  margin: -160rpx auto 0;
  z-index: 2;
}
</style>